<template>
	<view class="content">
		<navbar name="对比结果"></navbar>
		<view class="user-card">
			<view class="user-image">
				<image :src="userResult.avatarUrl" mode=""></image>
			</view>
			<view class="user-name">
				<!-- 李奶奶 -->
				{{userResult.nickName}}
			</view>
			<view class="user-flex">
				<view class="day-view">
					天数
					<view class="day-title">1<text>天</text></view>
				</view>
				<view style="width: 1px;height: 110rpx;background: #29A4DF;">
				</view>
				<view class="day-view">
					减重<image style="width: 10rpx;height: 24rpx;margin-left: 6rpx;" :src="true?'http://static.bsyjk.cn/topjian/AFB6B3999A5544A993CDEDCDC3CD6AA0.png':'http://static.bsyjk.cn/bottomjian/6AE8727BD0F8430EB03440590DEDD9D1.png'"></image>
					<view class="day-title">0.2<text>kg</text></view>
				</view>
				<view style="width: 1px;height: 110rpx;background: #29A4DF;">
				</view>
				<view class="day-view">
					减脂<image style="width: 10rpx;height: 24rpx;margin-left: 6rpx;" :src="false?'http://static.bsyjk.cn/topjian/AFB6B3999A5544A993CDEDCDC3CD6AA0.png':'http://static.bsyjk.cn/bottomjian/6AE8727BD0F8430EB03440590DEDD9D1.png'"></image>
					<view class="day-title">0.2<text>%</text></view>
				</view>
			</view>
		</view>
		<view class="contrast-body">
			<view class="title-flex">
				<view>
					
				</view>
				<view>
					2021-09-01
					11:53
				</view>
				<view>
					2021-10-01
					11:53
				</view>
				<view style="text-align: center;">
					变化
				</view>
			</view>
			<view class="content-flex" v-for="(item,index) in contrastList" :key="index">
				<view class="content-name ellipsis">
					{{item.name}}
				</view>
				<view class="content-lDay ellipsis" style="color: #2EA7E0;">
					{{item.lnum}}
				</view>
				<view class="content-rDay ellipsis" style="color: #2EA7E0;">
					{{item.rnum}}
				</view>
				<view class="content-bian ellipsis" style="text-align: center;" :class="[item.icon==1?'colorff3':'',item.icon==2?'colorf5':'']">
					<image v-if="item.icon" style="width: 36rpx; height: 20rpx;" :src="item.icon==1?'http://static.bsyjk.cn/shangsheng/089109C771134F4481893C6C3D2A6607.png':'http://static.bsyjk.cn/xiajiang/9E83C4FEDC174735A59732D0D1F13F0E.png'"></image>{{item.change}}
				</view>
			</view>
		</view>
		
		<!-- 生成海报 -->
		<button type="primary" @tap="shareFc()">分享对比数据</button>
		<!-- 图片展示由自己实现 -->
		<QSPopup ref="popup">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="posterImage || ''" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button>
				</view>
			</view>
		</QSPopup>
		<!-- 画布 -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" id="default_PosterCanvasId" canvas-id="default_PosterCanvasId"
				:style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import QSPopup from './components/QS-popup/QS-popup.vue'
	import _app from './components/QuShe-SharerPoster/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from './components/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js';
	const {
		Report
	} = require("@/components/peripheral/index")
	export default {
		components: {
			QSPopup
		},
		data() {
			return {
				userResult:{},
				contrastList:[{
					name:'体重',
					lnum:'75.80kg',
					rnum:'65.80kg',
					change:'10kg',
					icon:1,
				},
				{
					name:'体重',
					lnum:'75.80kg',
					rnum:'65.80kg',
					change:'10kg',
					icon:2,
				},
				{
					name:'体重',
					lnum:'75.80kg',
					rnum:'65.80kg',
					change:'10kg',
					icon:0,
				}],
				poster: {},
				posterImage: '',
				canvasId: 'default_PosterCanvasId'
			}
		},
		onLoad(e) {
			console.log(e,'123333333')
			this.getBaseUserInfo()
			this.getScaleCompareData(e.sHealthDataId,e.eHealthDataId)
		},
		methods: {
			// 获取用户信息
			getBaseUserInfo() {
				let _this = this;
				this.$loginl.get(global.apiUrls.getBaseUserInfo + '?userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							// result.sex = result.sex == '1' ? '男' : '女'
							_this.userResult = result;
							console.log(result, '21777777777')
						}
					}).catch(err => {})
			},
			getScaleCompareData(healthDataId1,healthDataId2){
				this.$api.get(global.apiUrls.getScaleCompareData, {
					healthDataId1:healthDataId1,
					healthDataId2:healthDataId2
					})
					.then(res => {
						if (res.data.code == 1000) {
						}
					}).catch(err => {})
			},
			async shareFc() {
				try {
					_app.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据

						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 200, //延时系数
						/* background: {
							width: 1080,
							height: 1920,
							backgroundColor: '#666'
						}, */
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([{
										type: 'custom',
										setDraw(Context) {
											Context.setFillStyle('black');
											Context.setGlobalAlpha(0.3);
											Context.fillRect(0, bgObj.height - bgObj
												.height * 0.2, bgObj.width, bgObj
												.height * 0.2);
											Context.setGlobalAlpha(1);
										}
									},
									// {
									// 	type: 'image',
									// 	url: '/static/3.jpg',
									// 	alpha: .3,
									// 	dx,
									// 	dy: bgObj.height - bgObj.width * 0.25,
									// 	infoCallBack(imageInfo) {
									// 		let scale = bgObj.width * 0.2 / imageInfo
									// 			.height;
									// 		return {
									// 			circleSet: {
									// 				x: imageInfo.width * scale / 2,
									// 				y: bgObj.width * 0.2 / 2,
									// 				r: bgObj.width * 0.2 / 2
									// 			}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
									// 			dWidth: imageInfo.width *
									// 				scale, // 因为设置了圆形图片 所以要乘以2
									// 			dHeight: bgObj.width * 0.2,
									// 			/* roundRectSet: { // 圆角矩形
									// 				r: imageInfo.width * .1
									// 			} */
									// 		}
									// 	}
									// },
									{
										type: 'text',
										fontStyle: 'italic',
										text: '取舍',
										size: fontSize,
										color: 'white',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											_app.log(
												'index页面的text的infocallback ，textlength:' +
												textLength);
											return {
												dx: bgObj.width - textLength - fontSize,
												dy: bgObj.height - lineHeight * 3
											}
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'text',
										text: '取舍',
										fontWeight: 'bold',
										size: fontSize,
										color: 'white',
										alpha: .75,
										textAlign: 'left',
										textBaseline: 'middle',
										serialNum: 1,
										allInfoCallback({ //v3.0.1 更新 可以获取drawArray中全部数据
											drawArray
										} = {}) {
											const obj = drawArray.find(item => item.id ===
												'tag1');
											/* return {
												dx: obj.dx,
												dy: obj.dy + lineHeight
											} */
											//也可以return promise对象
											return new Promise((rs, rj) => {
												setTimeout(() => {
													rs({
														dx: obj.dx,
														dy: obj
															.dy +
															lineHeight
													});
												}, 1);
											});
										}
									},
									{
										type: 'text',
										text: '取舍',
										size: fontSize,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width - textLength - fontSize,
												dy: bgObj.height - lineHeight
											}
										}
									},
									{
										type: 'qrcode',
										text: '你好，我是取舍',
										size: bgObj.width * 0.2,
										dx: bgObj.width * 0.05,
										dy: bgObj.height - bgObj.width * 0.25
									}
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.posterImage = d.poster.tempFilePath;
					this.$refs.popup.show()
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif

				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.$refs.popup.hide()
			}
		}
	}
</script>

<style lang="scss">
	.colorff3{
		color: #FF333A;
	}
	.colorf5{
		color: #F5A623;
	}
	// 对比内容
	.contrast-body{
		width: 702rpx;
		margin: 0 auto 41rpx;
		border-radius: 22rpx;
		background: #fff;
		box-shadow: 0px 1px 24px 9px rgba(0, 0, 0, 0.05);
		.content-flex{
			display: flex;
			height: 90rpx;
			font-size: 28rpx;
			border-bottom: 1px solid #E2E1E2;
			padding: 0 20rpx;
			line-height: 90rpx;
			view{
				width: 24%;
			}
		}
		.title-flex{
			display: flex;
			height: 124rpx;
			padding-top:24rpx;
			background: #2EA7E0;
			border-radius: 22rpx 22rpx 0 0;
			color: #fff;
			view{
				width: 25%;
			}
		}
	}
	.user-card {
		width: 708rpx;
		height: 314rpx;
		background: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png);
		background-size: 100% 100%;
		border-radius: 40rpx;
		margin: 90rpx auto 30rpx;

		.user-image {
			width: 140rpx;
			height: 140rpx;
			margin: -70rpx auto 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 1px solid #fff;
			}
		}

		.user-name {
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			padding: 2rpx 0 20rpx;
		}

		.user-flex {
			display: flex;
			color: #fff;
			.day-view {
				width: 33%;
				height: 110rpx;
				text-align: center;
				font-size: 30rpx;
			}
			.day-title{
				font-size: 60rpx;
				text{
					font-size: 30rpx;
				}
			}
		}
	}

	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
	}

	.border_radius_10px {
		border-radius: 10px;
	}

	.padding1vh {
		padding: 1vh;
	}

	.posterImage {
		width: 60vw;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}
</style>
